<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="fr">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Aurélie et Pascal</title>
<link rel="stylesheet" type="text/css" href="css/login.css" />
<script type="text/javascript" src="/js/jquery-1.6.js"></script>
<style type="text/css">
#countdown-blog {
	/*padding-left: 250px;*/
	color: #000;
	height: 200px
}

#countdown-blog div.set {
	/*float: left*/
	display: inline-block;
}

#countdown-blog h2 {
	text-align: center;
	font-size: 18px
}

#countdown-blog ul {
	list-style-type: none;
	height: 103px;
	padding: 20px 0px 5px
}

#countdown-blog li {
	float: left;
	background: url(images/compteur/filmstrip_countdown_9-0.png) 0 0
		no-repeat;
	width: 53px;
	height: 103px
}

#countdown-blog li#s0, li#m0 {
	background: url(images/compteur/filmstrip_countdown_5-0.png) 0 0
		no-repeat
}

#countdown-blog li#h0 {
	background: url(images/compteur/filmstrip_countdown_2-0.png) 0 0
		no-repeat
}

#countdown-blog li.comma {
	background: url(comma.png) 2px 75px no-repeat;
	width: 12px
}

#countdown-blog div.separator {
	/*float: left;*/
	display: inline-block;
	color: transparent;
	font: 80px Arial, sans-serif;
	height: 103px;
	padding: 25px 0 0;
}
</style>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		$("#username").focus();
	});
</script>
<body>
	<div class="container">
		<section id="content">
			<form action="/login" method="POST">
				<h1>Connexion</h1>
				<div>
					<%
						if (request.getAttribute("messageError") != null) {
							out.println("<span style=\"color: red;\">"
									+ request.getAttribute("messageError") + "</span>");
						}
					%>
					<input type="text" placeholder="Identifiant" required=""
						id="username" name="username" />
				</div>
				<div>
					<input type="password" placeholder="Mot de passe" required=""
						id="password" name="password" />
				</div>
				<div>
					<input type="submit" value="Log in" />
				</div>
			</form>
		</section>
		<div id="countdown-blog"
			style="width: 900px; text-align: center; margin: 0px auto;"></div>
		<script type="text/javascript" src="js/countdown.js"></script>
	</div>
</body>
</html>